<template>
  <div>
    <h1>正在学习组合式API</h1>
    <p>非响应式数据绑定：{{ data }}<input type="text" v-model="data"></p>
    <p>使用方法{{ fn() }}</p>
    <Hello />
    <Computed />
    <Watch />
    <Sycle />
    <Child a="hello" :b="123" :c="true" :d="msg" @abc="abcFn" />
    ------
    <p>来自于子组件的数据：{{ cMsg }} - {{( typeof cMsg )}}</p>
    <Child2 />
    <Other />
    <Attr class="box" style="color:red" @click="console.log(123)" abc="hahaha" @zxc="console.log(2)" />
    <MySlot>
      <template #a="obj">
        hello - {{ obj }}
      </template>
      <template #b>
        <span>world</span>
        <span>slot</span>
      </template>
    </MySlot>
  </div>
</template>

<script setup>
import Hello from './components/Hello.vue';
import Computed from './components/Computed.vue';
import Watch from './components/Watch.vue';
import Sycle from './components/Sycle.vue';
import Child from './components/Child.vue';
import Child2 from './components/Child2.vue';
import Other from './components/Other.vue';
import Attr from './components/Attr.vue';
import MySlot from './components/MySlot.vue';
import {ref, provide} from "vue";
const data = "hello";
function fn(){
  return data + " admin"
}

const msg = ref("父组件的数据");

const cMsg = ref(null);
function abcFn(v){
  cMsg.value = v;
}

function random(max,min){
  return Math.round(Math.random()*(max-min)+min);
}

// 注入数据
provide("data", data);
provide("msg", msg);
provide("fn", fn);
provide("random", random);

</script>

<style>
</style>
